<template>
 <div class="container" >
    <div><input ref="userNameRef" placeholder="请输入用户名称" v-on:keyup="goToEmail"></div>
    <div><input ref="emaileRef" placeholder="请输入用户邮箱" type="email" v-on:keyup="goToMobile"></div>
    <div><input ref="mobileRef" placeholder="请输入用户手机号" v-on:keyup="goTosubmint"></div>
    <div><input ref="submintRef" type="button" value="提交"></div>
 </div>
</template>
<script>
 export default {
 name: '',
 data: function(){
 return {
 }
 },
 methods:{
    goToEmail:function(){
       // console.info(event.keyCode);
       if(event.keyCode === 13){
        this.$refs.emaileRef.focus();
       }
    },
    goToMobile:function(){
       // console.info(event.keyCode);
       if(event.keyCode === 13){
        this.$refs.mobileRef.focus();
       }
    },
    goTosubmint:function(){
       // console.info(event.keyCode);
       if(event.keyCode === 13){
        this.$refs.submintRef.focus();
       }
    }
 }
 }
</script>
<style scoped>
html,
 body, 
 #app{
 height: 100%;
 }
 .container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 background-color: aliceblue;
 }
 .tr{
 width: 200px;
 flex-basis: 50px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: beige;
 align-items: center;
 }
 .second{
 background-color: aqua;
 }
</style>